<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="no" />
<meta name="format-detection" content="telephone=no">
<title></title>
<script src="static/js/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet">
</head>

<body class="body-detail">
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
    var e=document.getElementById("refreshed");  
    if(e.value=="no")e.value="yes";  
    else{e.value="no";location.reload();}
</script>
	<!-- 标题栏 -->
<script>
if (
  typeof test !== 'undefined' ||
  (typeof window.webkit !== 'undefined' &&
    navigator.userAgent.toLowerCase().match(/MicroMessenger/i) !=
      'micromessenger')
) {
  document.write(
    '<header class="header"><div class="header-bg"></div><div class="titlet-bar white"><a class="btn-goback dib" click="onGoBack"></a><div class="title ell">产品详情</div><a class="btn-share dib" href="javascript:;"></a></div></header>'
  )
}else{
  document.write(
    '<header class="header dn"><div class="header-bg"></div><div class="titlet-bar white"><a class="btn-goback dib" click="onGoBack"></a><div class="title ell">产品详情</div><a class="btn-share dib" href="javascript:;"></a></div></header>'
  )
}
</script>
	<!-- <header class="header">
		<div class="header-bg"></div>
		<div class="titlet-bar white">
			<a class="btn-goback dib" click="onGoBack"></a>
			<div class="title ell">产品详情</div>
			<script>
        if (typeof test !== 'undefined'||(typeof window.webkit !== 'undefined'&&navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != 'micromessenger')) {
          document.write('<a class="btn-share dib" href="javascript:;"></a>')
        }
      </script>
		</div>
	</header> -->
	<div class="content content-detail ovh">
		<div class="goods-main mod-goods">
			<div class="wrapper">
				<c:if test="${imgNum == 1}">
					<div class="goods-banner maxw rel"><img src="${imgOne}" width="100%">
					<c:if test="${goodsDetail.labelCode eq 'gold_bowl'}">
					<span class="icon-jfw dib"></span>
					</c:if>
					</div>
				</c:if>
				<c:if test="${imgNum > 1}">
					<div class="swiper-container maxw goods-banner">
						<div class="swiper-wrapper">
							<c:forEach items="${img}" var="imgs">
								<div class="swiper-slide"><img src="${imgs}" width="100%" alt=""></div>
							</c:forEach>
						</div>
						<!-- Add Pagination -->
						<div class="swiper-pagination"></div>
						<c:if test="${goodsDetail.labelCode eq 'gold_bowl'}">
						<span class="icon-jfw dib"></span>
						</c:if>
					</div>
				</c:if>
				<!-- 果树信息 -->
				<div class="goods-base">
					<dl class="p20 ml10 mr10 mb20">
						<dt class="cell pt20">
							<div class="cell-bd">
								<p class="f26 g6">(第${goodsDetail.time }期)</p>
								<p class="goods-title pt10 f34 js-goods-title">${goodsDetail.title}</p>
							</div>
							<div class="cell-fd f0 goods-price"><em class="f32">¥</em><span class="js-price">${goodsDetail.price }</span></div>
						</dt>
						<dd class="pt10 g9 goods-tips"><span class="f22">${goodsDetail.describe }</span></dd>
						<dd class="progress-bar">
							<div class="bar f0">
								<span class="dib" style="width: ${goodsDetail.saleNum*100/(goodsDetail.stockNum +goodsDetail.saleNum)}%"></span>
							</div>
							<div class="cell g6 pt20">
								<div class="cell-bd f0">
									<span class="f26">已认养</span><em class="f26 gf9953c">${goodsDetail.saleNum }</em><span class="f26">${goodsDetail.unitDesc }</span>
								</div>
								<div class="cell-fd pr0 f0">
									<span class="f26">剩余</span> <em class="f26 gf9953c">${goodsDetail.stockNum }</em> <span
										class="f26">${goodsDetail.unitDesc }</span>
								</div>
							</div>
						</dd>
					</dl>
				</div>

				<div class="mod-price cell">
					<div class="cell-hd tc">
						<div class="f0">
							<i class="dib vm icon-reward--01 mr10"></i> <span
								class="dib vm f26 g9">预计产量:</span>
						</div>
						<p class="f28 gf9953c pt20 mt10">
							<em class="js-weight-average f38">${goodsDetail.expectHarvest }</em>${goodsDetail.harvestUnitDesc }/${goodsDetail.unitDesc }
						</p>
					</div>
					<div class="cell-bd tc">
						<p class="f0">
							<span class="icon-reward--02 mr10 dib vm"></span> <span
								class="dib vm f26 g9">认养周期：</span>
						</p>
						<p class="pt20 mt10 f38 gf9953c">${goodsDetail.equityCycle }个月</p>
					</div>
				</div>
				<!-- 数量 -->
				<div class="bgwh ge3 pt20 pb20 rurchase-quantity">
					<div class="f0 g6 pt10 pb10 tc mt20">
						<i class="dib vm icon-reward--02"></i>
						<div class="dib vm pl20">
							<span class="f28">认养</span> <em class="f28 gf9953c js-number">${goodsDetail.minShopNum }</em>
							<span class="f28">${goodsDetail.unitDesc }，预计收益约</span> <span class="f28 gf9953c">
								<em class="js-weight">${goodsDetail.minShopNum * goodsDetail.expectHarvest }</em>${goodsDetail.harvestUnitDesc }
							</span>
						</div>
					</div>
					<div class="m20 cell quantity">
						<div class="cell-bd f0">
							<span class="f30 g6">认养数量：</span> <span
								class="f26 text-warning tips-number dn">*单笔最多认养 <em>${goodsDetail.maxShopNum }</em>${goodsDetail.unitDesc }
							</span>
						</div>
						<div class="cell-fd p0">
							<div class="mod-number g3">
								<span class="btn-number number-decrease ion-ios-minus-empty f40"></span>
								<input class="number-input tc number-form" type="tel" min="${goodsDetail.minShopNum }" max="${goodsDetail.maxShopNum }" value="${goodsDetail.minShopNum }">
								<span class="btn-number number-increase ion-ios-plus-empty f40"></span>
							</div>
						</div>
					</div>
				</div>
				<!-- 收益批次 -->
				<c:if test="${harvestNum > 1}">
				<dl class="bgwh mt20 p20 column-title">
					<dt class="g6 f26">收益批次</dt>
					<dd class="f28 pt10">每认养1${goodsDetail.unitDesc }，分${harvestNum }次收益</dd>
				</dl>
				<div class="batch-list">
					<div class="swiper-container">
						<div class="batch-list-div swiper-wrapper">
						<c:forEach items="${gsth}" var="gsth" varStatus="status">
							<div class="swiper-slide">
								<dl class="batch-item tc">
									<dt class="f32 pt20 mt10">第${ status.index + 1}批</dt>
									<dd class="f36 weight mt10">${gsth.expectHarvest }${goodsDetail.harvestUnitDesc }</dd>
									<dd class="forecast f0 mt10">
										<span class="f20 tc">(预计收益)</span>
									</dd>
									<dd class="f24 time g6">${gsth.expectHarvestTime }</dd>
								</dl>
							</div>
						</c:forEach>
						</div>
					</div>
				</div>
				</c:if>
				
				<!--  -->
				<c:if test="${harvestNum > 1}">
				<dl class="bgwh p20 column-title">
				</c:if>
				<c:if test="${harvestNum < 2}">
				<dl class="bgwh mt20 p20 column-title">
				</c:if>
					<dt class="g6 f26">服务与须知</dt>
					<dd class="f28 pt10">免费邮寄，安全保障</dd>
				</dl>
				<div class="bgwh p20">
					<div class="cell pt20 pb20">
						<div class="cell-bd tc">
							<i class="icon-serve--01 dib"></i>
							<p class="f24 g6 pt20">邮寄到家</p>
						</div>
						<div class="cell-bd tc">
							<i class="icon-serve--02 dib"></i>
							<p class="f24 g6 pt20">保鲜包装</p>
						</div>
						<div class="cell-bd tc">
							<i class="icon-serve--03 dib"></i>
							<p class="f24 g6 pt20">智能仓储</p>
						</div>
						<div class="cell-bd tc">
							<i class="icon-serve--04 dib"></i>
							<p class="f24 g6 pt20">冷链运输</p>
						</div>
					</div>
					<div class="f26 g6 logistics-tips mt20">
						<p>预计产量均为保底产量，请结合实际需求进行认养；</p>
						<p>新疆、西藏、青海、海南、港澳台及海外地区暂时不支持配送。</p>
					</div>
				</div>
				<!-- tips -->
				<!-- <div class="tips-more js-tips tc">
					<span class="js-icon dib vm ion-chevron-down ion-chevron-up g9"></span>
					<span class="tips-more__text g0 f24 dib vm">上拉查看图文详情</span>
				</div> -->
			</div>
		</div>
		<div class="detail-main mod-detail bgwh ui-1px-t ge3">
			<div class="wrapper photo100 g3">${goodsDetail.content }</div>
		</div>
	</div>
	<div class="column-buy">
		<div class="cell">
			<div class="cell-hd"></div>
			<div class="cell-bd tl lh0"><div class="money pr20 f0"><em class="dib vm f26 g6">结算：</em><span class="dib vm f28">¥</span><em class="dib vm js-money b f34"></em></div></div>
			<div class="cell-fd">
				<a class="btn-buy f34  white js-buy" href="javascript:void(0)">立即认养</a>
			</div>
		</div>
	</div>
	<!-- 下载提示页 -->
		<div class="explain dn">
			<div class="rs-arrow"><span class="rs-arrow-img"></span></div>
			<div class="rs-browser">
				<p>1.点击右上角</p>
				<p><span class="browser">2.选择</span>[在浏览器中打开]</p>
			</div>
			<div class="rs-know">
        <span class="rs-know-img"></span>
			</div>
		</div>
	<!-- 库存为0则说明 此商品不能再购买 -->
	<input type="hidden" id="stockNum" value="${goodsDetail.stockNum }">
	<!-- 售馨状态 00 售馨 01 售卖中 （状态等于00的时候 商品不能再购买）-->
	<input type="hidden" id="saleType" value="${goodsDetail.saleType }">
	<!-- 状态(00下架01上架) -->
	<input type="hidden" id="state" value="${goodsDetail.state }">
	<!-- 分享图片 -->
	<input type="hidden" id="thumb" value="${shareImg }">

	<link href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
	<script type="text/javascript" src="static/js/app.js"></script>
	<script src="https://cdn.bootcss.com/Swiper/4.1.0/js/swiper.min.js"></script>
	<script type="text/javascript" src="static/js/details.js"></script>
	<script src="static/js/layer_mobile/layer.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
	<script>
	
	(function(){
		// 添加 home 入口
	    if (
	      typeof test !== 'undefined' ||
	      (typeof window.webkit !== 'undefined' &&
	        navigator.userAgent.toLowerCase().match(/MicroMessenger/i) !=
	          'micromessenger')
	    ) {
	      
	    }else{
	    	var wrapper = document.querySelector('.wrapper')
		      if (!!wrapper) {
		        wrapper.insertAdjacentHTML(
		          'afterbegin',
		          '<a class="btn-home" href="/"></a>'
		        )
		      }
	    }
	}());
	
		var androidUrl ='';
	    var iosUrl = '';
	    var thumbnail = document.querySelector('#thumb').value;
	    fetchData()
	document.addEventListener(
		      'DOMContentLoaded',
		      function () {
		        new Swiper('.goods-banner.swiper-container', {
		          loop: true,
		          pagination: {
		            el: '.swiper-pagination',
		          },
		        });
		        var swiper = new Swiper('.batch-list .swiper-container', {
		          slidesPerView: 'auto',
		          spaceBetween: 0,
		        });
		        share()
		      })

	
  	var btn = document.querySelector('.js-buy')
  	var money = document.querySelector('.js-money')
  	var number = document.querySelector('.number-form')
  	var isSubmit = true;
  	var url = "wap/pay/firmOrder?goodsSpecTimeId=${goodsDetail.id}&goodsTimeId=${goodsTimeId}";
		btn.addEventListener('click', function(e) {

			var stockNum = document.querySelector('#stockNum')
			var saleType = document.querySelector('#saleType')
			var state = document.querySelector('#state')
			if(!isSubmit){
				return;
			}
			
			isSubmit = false;
			if (stockNum && stockNum.value.trim() === '0') {
				layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>',
						function() {
							isSubmit = true;
							setTimeout(function() {
								layer.closeAll()
							}, 2000)
						})
						
			} else if (saleType && saleType.value.trim() === '00') {
				layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>',
						function() {
							isSubmit = true;
							setTimeout(function() {
								layer.closeAll()
							}, 2000)
						})
			} else if (state && state.value.trim() === '00') {
				layerShow('<div><p>非常抱歉，</p><p>您查看的商品已下架~</p></div>',
						function() {
							isSubmit = true;
							setTimeout(function() {
								layer.closeAll()
							}, 2000)
						})
			} else {
				e.preventDefault()
				var params = new Object();
				params.goodsSpecTimeId=${goodsDetail.id};
				params.goodsTimeId=${goodsTimeId};
				params.num=number.value;
				checkParams(params);
		        //downloadApp()
				
			}
			
		})

		function checkParams(params) {
	        axios({
	            method: 'post',
	            url: 'wap/pay/checkParams',
	            data: params,
	            headers: { 'X-Requested-With': 'XMLHttpRequest' }
	        }).then(function (res) {
	        	isSubmit = true;
	            var data = res.data;
	            var state = data.result.state;
	            if (state == 1) {
	            	location.href = url + '&num=' + number.value;
	            } else {
	            	var code = data.result.code;
	            	if(code == 'loginOut'){
	            		goLoginView();
	            	}else{
	            		if(data.jump_url != null){
	            		layer.open({
	            		    content: '<div><p>非常抱歉，</p><p>'+data.result.message+'</p></div>'
	            		    ,btn: ['去实名', '取消']
	            		    ,shadeClose:false
	            		    ,yes: function(index){
	            		      location.href = data.jump_url;
	            		    }
	            		  });
	            		}else{
		            		layerShow('<div><p>非常抱歉，</p><p>'+data.result.message+'</p></div>',
		            				function() {
									setTimeout(function() {
										layer.closeAll()
									}, 2000)
							})
	            		}

	            	}
	            	
	            	
	            }

	        }).catch(function (err) {
	        	isSubmit = true;
	        });


    	}
		
		function layerShow(html, callback) {
			layer.open({
				shade : false,
				className : 'layer-tips',
				title : [ '', 'display:none' ],
				content : html,
				success : function(index) {
					(callback && typeof (callback) === "function")
							&& callback(index);
				}
			});
		}
		

		// 获取 APP 下载链接
	    function fetchData() {
	      axios({
	        url: '/wap/getDownloadUrl',
	        method: 'get'
	      })
	        .then(function(res) {
	          var result = res.data.result
	          androidUrl = res.data.Android
	          iosUrl = res.data.iOS
	        })
	        .catch(function(err){})
	    }

	      // 下载APP
	      function downloadApp(){
	        var buyBtn = document.querySelector('.js-buy')
	        var knowBtn = document.querySelector('.rs-know')
	        var explain = document.querySelector('.explain')
	        //buyBtn.addEventListener('click',function(e){
	          if (typeof test !== 'undefined') {
	          } else if (typeof window.webkit !== 'undefined'&&navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != 'micromessenger') {
	          }else{
	            explainSow()
	          }
	        //})
	        // 隐藏提示层
	        knowBtn.addEventListener('click',function(){
	          explain.classList.add('dn')
	        })
	      }
	      // 判断是否显示提示层
	      function explainSow() {
	        var u = navigator.userAgent
	        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
	        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
	        var ua = u.toLowerCase()
	        var explain = document.querySelector('.explain')
	        if (
	          ua.match(/MicroMessenger/i) == 'micromessenger' ||
	          u.indexOf('MQQBrowser') !== -1
	        ) {
	          /* if (isIOS) {
	            location.href = iosUrl
	          } else {
	            explain.classList.remove('dn')
	          } */
	          explain.classList.remove('dn')
	        } else if (ua.match(/WeiBo/i) == 'weibo') {
	          if (isIOS) {
	             explain.classList.remove('dn')
	          } else if (isAndroid) {
	            location.href = androidUrl
	          }
	        } else {
	        if (isAndroid) {
	          location.href = androidUrl
	        } else if (isIOS) {
	          location.href = iosUrl
	        }
	      }
	    }

	    // 分享操作
	    function share(){
	      var shareBtn = document.querySelector('.btn-share')
	      if(!shareBtn) return false
	      shareBtn.addEventListener('click',function(){
	        var infoData = {
	          state:'00',
	          url: location.href,
	          title: document.querySelector('.js-goods-title').textContent,
	          description: '我在万果田园发现了一个很好的产品，赶快来看看吧',
	          imgUrl:thumbnail
	        }
	        if (typeof test !== 'undefined') {
	          test.shareWeb(JSON.stringify(infoData))
	        } else if (typeof window.webkit !== 'undefined'&&navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != 'micromessenger') {
	          window.webkit.messageHandlers.shareWeb.postMessage(infoData)
	        } else {
	        }
	      })

	    }
		function goLoginView(){
			if (typeof test !== 'undefined') {
		          test.goLoginView()
		    } else if (typeof window.webkit !== 'undefined'&&navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != 'micromessenger') {
		      window.webkit.messageHandlers.goLoginView.postMessage('1111')
		    } else {
		    	location.href = '/wap/login/toLogin?forward='+decodeURI('/wap/goods/detail?id=${goodsTimeId}')+'&sourceChannel=0'
		    }
		}
		
	</script>
</body>

</html>